<template>
    <div class="card show-card" @click.stop.prevent="view">
        <div class="card-image">
            <figure class="image is-1by1">
                <img :src="show.cover" :alt="show.title">
            </figure>
        </div>
        <h3 class="card-header-title is-info has-text-centered">{{show.title}}</h3>
        <div class="card-content">
            <div class="content is-clipped" style="height: 4.5rem">
                {{show.brief}}
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'show-card',
        props: ['show'],
        methods: {
            view(){
                if (this.show.albumId > 0) {
                    this.$router.push({name: 'Album', params: {id: this.show.albumId}})
                } else {
                    let showString = window.localStorage.getItem('shows')
                    let showArray = []
                    if (showString) {
                        showArray = JSON.parse(showString)
                    }
                    //alert(JSON.stringify(this.show));
                    if (showArray.indexOf(this.show) === -1 ){
                    }
                    let storageArray = []
                    showArray.forEach((ele)=>{
                        if(ele.id != this.show.id){
                            storageArray.push(ele);
                        }
                    })
                    storageArray.unshift(this.show);


                    window.localStorage.setItem('shows', JSON.stringify(storageArray))

                    this.$router.push({name: 'Show', params: {showId: this.show.id}})
                }
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .show-card {
        cursor: pointer;
    }
</style>
